<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简单一说</title>
    <link rel="stylesheet" type="text/css" href="/static/css/litewebchat.min.css"/>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" >
</head>
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<body>
<!-- 主容器 -->
<div class="lite-chatbox" id="scroll" style="overflow:auto; height: 100%; width: 100%;">

</div>
<!--表情modal-->
<div id="emoji" style="text-align: center;display: none;height: 300px;position: relative;">

</div>
<!--按钮输入框-->
<div class="input-group" style="position: fixed;bottom: 0px;">
    <div class="input-group-prepend">
        <button style="height: 50px;width: 50px;border: 1px solid #ced4da" class="btn btn-outline-secondary" type="button" id="button-addon1"><svg class="bi bi-emoji-smile" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
            <path fill-rule="evenodd" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683z"/>
            <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
        </svg></button>
    </div>
    <input type="text" class="form-control" style="height: 50px;" id="msg_content" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

</body>
<script src="/static/js/socket.io-1.4.4.js"></script>
<script src="/static/js/jquery-1.11.1.js"></script>
<script>
    // 定义表情库
    const EMOJI = [1550652578990,1550652579100,1550652579141,1550652579158,1550652579243,1550652579294,1550652579532,1550652579643,1550652579707,1550652579793,1550652580184,1550652580218,1550652580324,1550652580358,1550652580823,1550652580837,1550652580859,1550652580867,1550652580937,1550652581213,1550652581360,1550652581522,1550652581616,1550652581678,1550652581744,1550652581782,1550652581816,1550652581932,1550652582217,1550652582259,1550652582262,1550652582454,1550652582554,1550652582563,1550652582887];
    const MY = 'cright';
    const HE = 'cleft';
    const STYLE = 'tips-danger';
    const socket = io('http://123.207.150.155:9502');
    // 生成默认用户信息
    var user = {};
    $.ajax({
        type : "POST",
        contentType: "application/json;charset=UTF-8",
        url : "index.php/Index/getImg",
        success : function(result) {
            user = result;
        }
    });
    // 初始化
    socket.on('connectcallback', function(res){
        tips(res, STYLE)
    });

    // 发送消息
    socket.on("sendmsgcallback", function (res) {
        showMsg(res, HE)
    });

    // 关闭聊天室
    socket.on('closecallback',function(res){
        tips(res);
    });

    // 输入框选中后隐藏表情modal
    $("#msg_content").focus(function(){
        $('#emoji').hide();
    });

    /**
     * 发送消息
     * @returns {boolean}
     */
    document.onkeydown = function (e) { // 回车提交表单
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            sendMsg();
        }
    }
    function sendMsg() {
        var msg = $("#msg_content").val();
        if(!msg){
            alert('请输入要发送的消息');
            return false;
        }
        user.msg = msg;
        showMsg(user, MY);
        socket.emit("sendmsg", user);
    }
    /**
     * 显示消息
     * @returns {boolean}
     *  radius 圆头像
     *  <span class="htitle owner">'+d.no+'</span> 等级标识
     */
    function showMsg(d, cright){
        var html = '';
        html += '<div class="'+cright+' cmsg">';
        html += '<img class="headIcon" ondragstart="return false;" oncontextmenu="return false;" src="'+d.avatar+'"/>';
        html += '<span class="name">'+d.name+'</span>';
        html += '<span class="content">'+d.msg+'</span>';
        html += '</div>';
        $('.lite-chatbox').append(html);
        var div = document.getElementById('scroll');
        div.scrollTop = div.scrollHeight;
        $("#msg_content").val('');
    }

    /**
     * 系统通知
     * @param d
     * @param s
     */
    function tips(d, s = ''){
        html = ''
        html += '<div class="tips">';
        html += '<span class="'+s+'">'+d.msg+'</span>';
        html += '</div>';
        $('.lite-chatbox').append(html);
        var div = document.getElementById('scroll');
        div.scrollTop = div.scrollHeight;
    }

    /**
     * 初始化表情包
     */
    emoji();
    function emoji(){
        html = '';
        for ($i = 0; $i < EMOJI.length; $i++){
            html += '<img style="width: 50px;height: 50px;" onclick="click_emoji('+EMOJI[$i]+')" src="/static/emoji/'+EMOJI[$i]+'.gif" alt="">';
        }
        $("#emoji").html(html)
    }

    /**
     * 点击表情添加到输入框中
     * @param e
     */
    function click_emoji(e){
        var emoji_img = '<img style="width: 40px;height: 40px;" src="/static/emoji/'+e+'.gif" alt="">';
        user.msg = emoji_img;
        showMsg(user, MY);
        socket.emit("sendmsg", user);
    }

    /**
     * 控制表情modal显示隐藏
     */
    $("#button-addon1").click(function(){
        $("#emoji").toggle()
        var  h= $(window).scrollTop(); //获取当前滚动条距离顶部的位置
        $("html,body").animate({ scrollTop: h+800 }, 800);//点击按钮向下移动800px，时间为800毫秒
    })
    /**
     * 点击空白地方隐藏表情modal
     */
    $('#scroll').click(function(){
        $('#emoji').hide();
    });
</script>
</html>